import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

import Icon from './icon';

library.add(fas);

export default {
  title: 'Components/Icon',
  component: Icon,

} as ComponentMeta<typeof Icon>;


/**
 * 使用图标
 * @returns 
 */
export const icon = () => {

  return (
    <>
      <Icon icon="user" />&nbsp;
      <Icon icon="angry" />&nbsp;
      <Icon icon="book-reader" />&nbsp;
    </>
  )
}

/**
 * 使用图标
 * @returns 
 */
 export const iconWithTheme = () => {
  return (
    <>
      <Icon icon="user" theme="info" />
      &nbsp;
      <Icon icon="user" theme="primary" />
      &nbsp;
      <Icon icon="user" theme="secondary" />
      &nbsp;
      <Icon icon="user" theme="success" />
      &nbsp;
      <Icon icon="user" theme="warning" />
      &nbsp;
      <Icon icon="user" theme="danger" />
      &nbsp;
      <Icon icon="user" theme="dark" />
    </>
  )
}